<div class="wrapper">
    <ul nz-menu nzMode="inline" [nzInlineCollapsed]="isCollapsed">
        <ng-container *ngFor="let menu of sidebarMenuData">
            <ng-container *ngIf="!menu.childMenu">
                <li nz-menu-item nz-tooltip nzPlacement="right" [nzTitle]="isCollapsed ? menu.name : '' "
                    [routerLink]="menu.url" routerLinkActive="ant-menu-item-selected">
                    <i nz-icon [iconfont]="menu.icon" style="color: #0D0A0A"></i>
                    <span>{{menu.name}}</span>
                </li>
            </ng-container>
            <ng-container *ngIf="menu.childMenu">
                <li nz-submenu><span title><i nz-icon [iconfont]="menu.icon" style="color: #0D0A0A"></i><span>{{menu.name}}</span></span>
                    <ul>
                        <ng-container *ngFor="let childMenu of menu.childMenu">
                            <ng-container *ngIf="!childMenu.childMenu">
                                <li nz-menu-item [routerLink]="childMenu.url" routerLinkActive="ant-menu-item-selected">
                                    {{childMenu.name}}
                                </li>
                            </ng-container>
                            <ng-container *ngIf="childMenu.childMenu">
                                <li nz-submenu [nzTitle]="childMenu.name">
                                    <ul>
                                        <li *ngFor="let i of childMenu.childMenu" nz-menu-item [routerLink]="i.url"
                                            routerLinkActive="ant-menu-item-selected">
                                            {{i.name}}
                                        </li>
                                    </ul>
                                </li>
                            </ng-container>
                        </ng-container>
                    </ul>
                </li>
            </ng-container>
        </ng-container>
    </ul>
</div>
